<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能学习平台 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .navbar {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .hero-section {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            padding: 6rem 0;
            margin-bottom: 3rem;
        }
        .course-card {
            transition: all 0.3s;
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            overflow: hidden;
        }
        .course-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .course-img {
            height: 180px;
            object-fit: cover;
        }
        .rating {
            color: #ffc107;
        }
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 2rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 80px;
            height: 3px;
            background-color: #007bff;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fa fa-graduation-cap text-primary me-2"></i>
                智能学习平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/">首页</a>
                    </li>
                    <!-- 调整学习分析的位置和样式，使其融入导航项 -->
                    <li class="nav-item">
                        <a class="nav-link" href="/analytics">
                            <i class="fa fa-bar-chart me-1"></i> 学习分析
                        </a>
                    </li>
                    {% if user %}
                        {% if user.role == 'teacher' %}
                            <li class="nav-item">
                                <a class="nav-link" href="/teacher/dashboard">教师中心</a>
                            </li>
                        {% else %}
                            <li class="nav-item">
                                <a class="nav-link" href="/student/dashboard">我的学习</a>
                            </li>
                        {% endif %}
                    {% endif %}
                </ul>
                <div class="navbar-nav">
                    {% if user %}
                        <span class="nav-item nav-link">欢迎，{{ user.name }}</span>
                        <a class="nav-link" href="/logout" onclick="event.preventDefault(); fetch('/logout').then(() => window.location.reload())">
                            <i class="fa fa-sign-out me-1"></i>退出登录
                        </a>
                    {% else %}
                        <a class="nav-link" href="/login">
                            <i class="fa fa-sign-in me-1"></i>登录
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>


    <!-- 英雄区 -->
    <section class="hero-section">
        <div class="container text-center">
            <h1 class="display-4 mb-3">开启你的学习之旅</h1>
            <p class="lead mb-4">精选优质课程，专业教师团队，助力你的知识成长</p>
            <a href="/login" class="btn btn-light btn-lg px-5">
                <i class="fa fa-user-plus me-2"></i>立即登录
            </a>
        </div>
    </section>

    <div class="container">
        <!-- 推荐课程 -->
        {% if recommendations %}
        <section class="mb-8">
            <h2 class="section-title">为你推荐</h2>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% for course in recommendations %}
                <div class="col">
                    <div class="course-card h-100">
                        <img src="https://picsum.photos/seed/course{{ course.id }}/600/400" class="course-img" alt="{{ course.title }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ course.title }}</h5>
                            <div class="rating mb-2">
                                {% for i in range(5) %}
                                    {% if i < course.rating | int %}★{% else %}☆{% endif %}
                                {% endfor %}
                                <span class="text-dark">{{ course.rating }}</span>
                            </div>
                            <p class="card-text text-muted">{{ course.description | truncate(120) }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge bg-primary">{{ course.difficulty }}</span>
                                <a href="/course/{{ course.id }}" class="btn btn-primary">查看详情</a>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent d-flex justify-content-between">
                            <small class="text-muted">报名人数: {{ course.enrollment_count }}</small>
                            <small class="text-muted">完课率: {{ course.completion_rate }}%</small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        <!-- 所有课程 -->
        <section>
            <h2 class="section-title">全部课程</h2>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% for course in courses %}
                <div class="col">
                    <div class="course-card h-100">
                        <img src="https://picsum.photos/seed/course{{ course.id }}/600/400" class="course-img" alt="{{ course.title }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ course.title }}</h5>
                            <div class="rating mb-2">
                                {% for i in range(5) %}
                                    {% if i < course.rating | int %}★{% else %}☆{% endif %}
                                {% endfor %}
                                <span class="text-dark">{{ course.rating }}</span>
                            </div>
                            <p class="card-text text-muted">{{ course.description | truncate(120) }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge bg-primary">{{ course.difficulty }}</span>
                                <a href="/course/{{ course.id }}" class="btn btn-primary">查看详情</a>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent d-flex justify-content-between">
                            <small class="text-muted">报名人数: {{ course.enrollment_count }}</small>
                            <small class="text-muted">完课率: {{ course.completion_rate }}%</small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </section>
    </div>

    <footer class="bg-dark text-white py-5 mt-8">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h5>关于我们</h5>
                    <p>智能学习平台致力于提供高质量的在线教育资源，助力每一位学习者成长。</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/" class="text-white">首页</a></li>
                        <li><a href="/login" class="text-white">登录</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    <p>邮箱: contact@example.com</p>
                </div>
            </div>
            <div class="border-top pt-3 mt-4 text-center">
                <p>&copy; 2025 智能学习平台 版权所有</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>